<template>
  <div class='file'>
    <div class='fileType'>
      <div class='fileType-item' v-for='(item,index) in data.fileType' :class='{"fileType-active":data.acitve === index}' :key='index' @click='data.acitve = index'>{{item}}</div>
    </div>
    <div class='fileBox'>
      <div class='fileBox-item' v-if='data.acitve === 0'></div>
      <div class='fileBox-item' v-if='data.acitve === 1'></div>
      <div class='fileBox-item' v-if='data.acitve === 2'></div>
      <div class='fileBox-item' v-if='data.acitve === 3'></div>
      <div class='fileBox-item' v-if='data.acitve === 4'></div>
      <div class='fileBox-item' v-if='data.acitve === 5'></div>
      <div class='fileBox-item' v-if='data.acitve === 6'></div>
      <div class='fileBox-item' v-if='data.acitve === 7'></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';

  //png、jpg、jpeg、docx、xlsx、ppt、pdf、md、txt、audio、video
  let data = reactive({
    fileType:['docx','xlsx','ppt','pdf','md','txt','audio','video'],
    acitve:0,
  });

  onMounted(()=>{

  })

</script>

<style scoped lang='scss'>
  .file{
    width: 100%;
    height: 100vh;
    margin: 20px;
  }
  .fileType{
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    .fileType-item{
      width: 100px;
      border: 1px solid #535353;
      border-radius: 4px;
      cursor: pointer;

      & +.fileType-item{
        margin-left: 10px;
      }

    }

    .fileType-active{
      background: #6595fd;
      color: #ffffff;
      border: 1px solid #6595fd;
      cursor: pointer;
    }
  }

  .fileBox{
    width: 100%;
    height: calc(100% - 60px);
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
